<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品</title>
    <style>
        .low,
        .high {
            width: 76px;
        }

        .datas table {
            width: 400px;
            line-height: 35px;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="mobiles">
        <div class="search-box">
            <p><span>按照价格搜索:</span>
                <input type="text" class="low">
                <input type="text" class="high">
                <input type="button" value="搜索" class="btn1">
            </p>
            <p>
                <span>按照名称搜索</span>
                <input type="text" class="name">
                <input type="button" value="搜索" class="btn2">
            </p>

        </div>
        <div class="datas">
            <table border="1">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody class="tb">

                </tbody>
            </table>
        </div>
    </div>
    <script>
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        },
        {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }];


        //在表格中显示商品数组中的商品数据
        //arr 显示的商品数组
        function showDatas(arr) {
            // //先清空表格中原来显示的商品数据
            var tb = document.querySelector('.tb');
            tb.innerHTML = '';
            //遍历数组中的商品对象，将对象属性值拼接成html代码
            //拼接后，设置为表格中的行，---新增元素  innerHTML
            arr.forEach(function (goods) {
                var html = '<tr><td>' + goods.id + '</td><td>' + goods.pname + '</td><td>' + goods.price + '</td></tr > '
                var tb = document.querySelector('.tb');
                tb.innerHTML += html;
            });
        }

        showDatas(data);

        document.querySelector('.btn1').onclick = function () {
            // console.log('ok');
            //检查两个价格文本框是否填写价格（至少填写一个）
            var low = document.querySelector('.low').value;
            var high = document.querySelector('.high').value;
            if (low.trim() === '' && high.trim() === '') {
                // console.log('不允许为空')
                alert('按照价格填写时必须填写价格')
            } else {
                //搜索
                var newGoods = data.filter(function (goods) {
                    var result;
                    if (low && high) {
                        result = goods.price >= low && goods.price <= high;
                    } else {
                        if (low) {
                            result = goods.price >= low;
                        }
                        if (high) {
                            result = goods.price <= high;
                        }
                    }
                    return result;
                })
                //已过滤
                console.log(newGoods)
                showDatas(newGoods);
            }
        }

        document.querySelector('.btn2').onclick = function () {
            // console.log('ok');
            //检查名称文本框是否填写价格（至少填写一个）
            var name = document.querySelector('.name').value;
            if (name.trim() === '') {
                // console.log('不允许为空')
                alert('按照名称填写时必须填写名称')
            } else {
                //搜索
                var newGoods = data.filter(function (goods) {
                    var result;
                    if (name == goods.pname) {
                        result = goods.pname;
                    }
                    return result;
                })
                //已过滤
                console.log(newGoods);
                showDatas(newGoods);
            }
        }
    </script>
</body>

</html>